const addchange = new bootstrap.Modal(adddiv = document.querySelector(`.add-modal`));
const editdiv = document.querySelector(`.edit-modal`);
const editchange = new bootstrap.Modal(editdiv);
const creator = `无奈又`;
const allList = document.querySelector(`.list`);
const addform = document.querySelector(`.add-form`);

function rendering() {
    axios({
        url: `https://hmajax.itheima.net/api/books`,
        params: {
            creator
        }
    }).then(result => {
        let str = result.data.data.map((item, i) => {
            const { id, bookname, author, publisher } = item
            return `<tr>
    <td>${i + 1}</td>
    <td>${bookname}</td>
    <td>${author}</td>
    <td>${publisher}</td>
    <td data-id=${id}>
      <span class="del">删除</span>
      <span class="edit">编辑</span>
    </td>
  </tr>`
        }).join(``)
        allList.innerHTML = str
    })
}
rendering()
function add() {
    document.querySelector(`.add-btn`).addEventListener(`click`, () => {
        let addlist = serialize(addform, { hash: true, empty: true })
        axios({
            url: `https://hmajax.itheima.net/api/books`,
            method: `POST`,
            data: {
                ...addlist, creator,
            }
        }).then(function () {
            rendering()
            addform.reset();
            addchange.hide();
        }).catch(e => { console.log(e); })
    })
}
add()
allList.addEventListener(`click`, e => {
    if (e.target.tagName == `SPAN`) {
        const father = e.target.closest(`td`).dataset.id
        if (e.target.className === `del` || e.target.className === `edit`) {
            change(e.target.className, father)
        }
    }
})
function change(classname, father) {
    if (classname === `del`) {
        axios({
            url: `https://hmajax.itheima.net/api/books/` + father,
            method: `DELETE`
        }).then(() => {
            location.reload()
        }).catch(e => console.log(e))
    }
    if (classname === `edit`) {
        editchange.show()
        axios({
            url: `https://hmajax.itheima.net/api/books/` + father,
            method: `GET`
        }).then(e => {
            let { id, bookname, author, publisher } = e.data.data;
            editdiv.querySelector(`.id`).value = id;
            editdiv.querySelector(`.bookname`).value = bookname;
            editdiv.querySelector(`.author`).value = author;
            editdiv.querySelector(`.publisher`).value = publisher;
            document.querySelector(`.edit-btn`).addEventListener(`click`, () => {
                bookname = editdiv.querySelector(`.bookname`).value;
                author = editdiv.querySelector(`.author`).value;
                publisher = editdiv.querySelector(`.publisher`).value;
                axios({
                    url: `https://hmajax.itheima.net/api/books/` + id,
                    method: `PUT`,
                    data: { bookname, author, publisher, creator }
                }).then(() => {
                    editchange.hide();
                    rendering()
                }).catch(e => console.log(e))
            })
        })
    }
}